
<!--vue中不使用template 渲染页面  使用jsx+ render函数-->
<script>
  export default {
    name: 'JsxFunctionComponent',
    functional: true, // jsx 函数式组件 (无状态组件,没有 this, 没有 data，没有methods)

    props: {
      nodeType:{

      },
      nodeStyleNum:{

      },

    },
/*
    data(){
      return {
        str:"str"
      }
    },
    methods: {
      divclick() {
        console.log("点我一下")
      }
    },*/
    render(h, context) {
      // 方法声明

      const divclick = ()=>{
        console.log("点我一下")
      }

      // console.log(context.props) // 传过来的东西要么在props 里或者attrs里
      console.log(context)
      const { nodeType } = context.props
      // console.log(nodeType)
      if (nodeType == 1){
      return (<div>123456789</div>)
      }else if (nodeType == 2){
        return (<h2>123456</h2>)
      }else{
        return (<div style={{color:"red"}} onClick={divclick}>123</div>)
      }
    },


  }
</script>

<style scoped>
  .sub-el-icon {
    color: currentColor;
    width: 1em;
    height: 1em;
  }
</style>
